<template>
    <!-- 学习资料上传管理 -->

    <div class="class-mg">
        <!-- 创建班级头部 -->
        <div class="up-material">

        </div>

        <!-- 文件下载表格 -->
        <div class="table">
            <span>我的班级资料：</span>
            <el-table :data="materialData" style="width: 100%;border-radius: 10px;margin-top: 10px;" >
                <el-table-column prop="nickName" label="上传者" width="120"></el-table-column>
                <el-table-column prop="materialTitle" label="文件名"></el-table-column>
                <el-table-column prop="size" label="文件大小" width="180"></el-table-column>
                
                <el-table-column label="文件下载" #default="data">
                    <img style="margin-left: 20px;" src="/src/assets/svg/download.svg" class="i-img"
                        @click="ondownload(data.row.materialPath)">

                </el-table-column>
            </el-table>
        </div>
    </div>


</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { StarFilled } from "@element-plus/icons-vue";
import { Star } from "@element-plus/icons-vue";
import A from '../MD/A.vue';
import { downloadMaterial, upMaterial } from '@/api/filesHttp';
import { openInfo } from '@/utils/openInfo';
import useUserStore from '@/stores/useUserStore';
import teacherHttp from '@/api/teacherHttp';
import studentHttp from '@/api/studentHttp';
const userStore = useUserStore()
//学习资料数据库 主键id  class_id所属于班级 资料名称 资料存储地址 上传资料的老师 上传时间
// 显示弹窗
const showModal = ref(false)


onMounted(() => {
    //初始化数据
    getStudentMaterial()
})


//文件资料表单 className materialId materialPath materialTitle nickName size
const materialData = ref([])

//获取文件列表数据 没有加入班级就会返回请先加入班级
function getStudentMaterial() {
    studentHttp.getStudentMaterial(userStore.userInfo.userId).then((res) => {
        if(res.code==200){
            materialData.value = res.data;
            console.log("学生资料",res);  
        }else{
            openInfo(res.msg)
        }
    })
}


async function ondownload(materialPath) {
    try {
        // 创建一个新的<a>元素，用于模拟点击下载
        const link = document.createElement('a');
        link.href = materialPath;
        // 模拟点击<a>元素，触发下载操作
        link.click();
    } catch (error) {
        console.error('下载文件失败:', error);
    }
}
</script>

<style scoped>
/* 最大的盒子 */
.class-mg {
    background-color: rgb(182, 174, 174, 0.1);
    display: flex;
    flex-direction: column;
    height: 900px;
    border-radius: 10px;
}

/* 创建班级和发送通知 */
.up-material {
    margin: 10px;
    height: 50px;
    background-color: rgb(182, 174, 174, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
}

/* 关闭弹窗键 */
.i-img {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.i-img:hover {
    transform: scale(1.2);
}


.table {
    border-radius: 10px;
    padding: 20px;

}
</style>